<template>
	<view class="order">
		<!-- tab 栏 -->
		<view class="tabBox" v-if="type != 1">
			<view class="card" :style="{backgroundImage:'url('+baseUrl+'static/index/pull.png'+')'}">
				<view class="card_1">
					<view class="my">团员总人数</view>
					<view class="curr">{{totalStaffAll||0}}</view>
				</view>
			</view>
		</view>
		<!-- 列表 -->
		<view class="listBox">
			<view class="list" v-for="(item,index) in list" :key="index">
				<view class="list_l">
					<image :src="item.avatar" mode=""></image>
					<view class="list_l_r">
						<view class="name">{{item.name||item.nickname||''}}</view>
						<view class="name">
							<image :src="baseUrl+'static/index/card2.png'" mode="" v-if="item.level_id == 1"></image>
							<image :src="baseUrl+'static/index/card1.png'" mode="" v-if="item.level_id == 2"></image>
						</view>
					</view>
				</view>
				<view class="list_r">
					<view class="time">{{item.time||''}}</view>
				</view>
			</view>
		</view>
		<!-- 提示栏 -->
		<view class="more">{{isText}}</view>
	</view>
</template>

<script>
	import config from '@/common/config/config';
	export default {
		data() {
			return {
				baseUrl: config.baseurl,
				page: 1,
				list: [],
				isText: '',
				last_page: 1,
				type: '',
				user_id: '',
				totalStaffAll: ''
			};
		},
		onLoad(e) {
			if (e.type) {
				this.type = 1
				uni.setNavigationBarTitle({
					title: '所属成员'
				});
			}
			this.user_id = e.id ? e.id : ''


		},
		onShow() {
			this.init()
			if (this.type != 1) {
				this.loadData()
			}
			this.getList()
		},
		methods: {
			init() {
				this.list = []
				this.page = 1
				this.isText = ''
			},
			// 获取团队团员总人数
			async loadData() {
				await uni.request({
					url: '/wanlshop/user/refresh',
					method: 'POST',
					success: res => {
						this.totalStaffAll = res.data.totalStaffAll
					}
				});
			},

			async getList() {
				let that = this

				if (that.type == 1) {
					// 获取员工下的用户列表
					await uni.request({
						url: '/wanlshop/user/userList',
						data: {
							page: that.page,
							user_id: that.user_id
						},
						success: res => {
							that.list = that.list.concat(res.data.data)
							that.last_page = res.data.last_page
							res.data.total == that.list.length ? that.isText = '暂无数据' : that.isText = ''
							console.log(that.list, 'that.list')
						}
					});
				} else {
					// 获取团队团员列表
					await uni.request({
						url: '/wanlshop/distribution/teamUserList',
						data: {
							page: that.page,
						},
						success: res => {
							that.list = that.list.concat(res.data.data)
							that.last_page = res.data.last_page
							res.data.total == that.list.length ? that.isText = '暂无数据' : that.isText = ''
							console.log(that.list, 'that.list')
						}
					});
				}
			},
		},
		onReachBottom() {
			let that = this
			if (that.page < that.last_page) {
				that.page = that.page + 1
				that.getList()
			}
		}

	}
</script>

<style lang="less">
	page {
		background-color: #fff;
	}

	.u-tab-bar {
		display: none !important;
	}

	.more {
		width: 100%;
		text-align: center;
		font-size: 28rpx;
		margin: 30rpx auto;
		padding-bottom: 50rpx;
	}

	.order {
		width: 100vw;

		.tabBox {
			width: 100%;
			height: 180rpx;
			position: sticky;
			padding-bottom: 20rpx;
			top: 0;
			background-color: #fff;
			z-index: 1000;
			.card {
				width: 94%;
				height: 100%;
				background-size: 100% 100%;
				border-radius: 20rpx;
				margin: 20rpx auto;
				padding: 20rpx 20rpx 20rpx 50rpx;
				text-align: center;

				.card_1 {
					color: #fff;
					align-items: center;

					.my {
						font-weight: 600;
						font-size: 36rpx;
					}

					.curr {
						font-weight: 600;
						font-size: 40rpx;
						padding-right: 10rpx;
						margin-top: 16rpx;
					}
				}


			}
		}

		.listBox {
			width: 95%;
			margin: 30rpx auto;

			.list {
				width: 100%;
				height: auto;
				padding: 20rpx;
				border-radius: 20rpx;
				border: 2rpx solid #d9d9d966;
				box-shadow: 0 0 16rpx rgba(0, 0, 0, .1);
				margin: 20rpx auto;
				display: flex;
				justify-content: space-between;

				.list_l {
					width: 70%;
					display: flex;
					align-items: center;

					image {
						width: 84rpx;
						height: 84rpx;
						border-radius: 50%;
					}

					.list_l_r {
						font-size: 28rpx;
						font-weight: 400;
						margin-left: 20rpx;

						.name {
							height: 46rpx;
							line-height: 46rpx;
							display: flex;
							padding: auto;

							image {
								width: 30rpx;
								height: 30rpx;
								margin: auto 0;
							}
						}
					}
				}

				.list_r {
					width: 24%;
					font-size: 24rpx;
					text-align: center;

					.time {
						color: #979797;
						margin-bottom: 10rpx;
					}
				}
			}
		}
	}
</style>